<template>
  <div class="map_echarts_content">
    <div @click="goback">
      <img
        v-if="title!='中国'"
        class="returnImg"
        src="@/assets/media-return.png"
      />
    </div>
    <div
      ref="charts"
      class="base_map"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '中国', //全国json文件名称换成中文的>南海诸岛就不显示了，还是英文的比较好
      points: [
        // 散点图数据
        {
          name: '新疆',
          value: [87.628579, 43.793301],
          itemStyle: { color: '#00EEFF' },
        }, // 新疆
        {
          name: '四川',
          value: [104.076452, 30.651696],
          itemStyle: { color: '#00EEFF' },
        }, // 四川
      ],
      linesData: [
        // 线条数据
        {
          fromname: '北京',
          toname: '新疆',
          coords: [
            [116.407387, 39.904179],
            [87.628579, 43.793301],
          ],
          value: '250',
        }, // 北京->新疆
        {
          fromname: '北京',
          toname: '四川',
          coords: [
            [116.407387, 39.904179],
            [104.076452, 30.651696],
          ],
          value: '118',
        }, // 北京->四川
      ],
      // 飞机svg
      planePath:
        'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    // 初始化地图
    initCharts() {
      let geojson;
      let title = this.getLastTitle();
      try {
        if (title == '中国') {
          geojson = require('@/geojson/' + title + '.json');
        } else {
          geojson = require('@/geojson/province/' + title + '.json');
        }
      } catch (error) {
        this.$message.error('没有【' + title + '】的geojson文件');
        this.removeLastTitle();
        return;
      }
      //先清理掉之前的地图
      if (this.charts) {
        // this.charts.clear();// 清空当前实例，会移除实例中所有的组件和图表。
        this.charts.dispose(); // 销毁后实例 这里使用dispose防止残留
      }

      this.charts = this.$echarts.init(this.$refs['charts']);
      const option = {
        title: {
          text: this.title, // 标题
        },
        backgroundColor: '#0E2152', // 背景颜色
        //地理坐标系组件
        geo: {
          // 地图配置
          map: this.title,
          roam: true, // 拖拽
          label: {
            // 图形上的文本标签
            normal: {
              // 通常状态下的样式
              show: true,
              textStyle: {
                color: '#fff',
              },
            },
            emphasis: {
              // 鼠标放上去高亮的样式
              textStyle: {
                color: '#fff',
              },
            },
          },
          itemStyle: {
            // 地图区域的样式设置
            normal: {
              // 通常状态下的样式
              borderColor: '#5089EC',
              borderWidth: 1,
              areaColor: {
                //地图区域的颜色
                type: 'radial', // 径向渐变
                x: 0.5, // 圆心
                y: 0.5, // 圆心
                r: 0.8, // 半径
                colorStops: [
                  {
                    // 0% 处的颜色
                    offset: 0,
                    color: 'rgba(0, 102, 154, 0)',
                  },
                  {
                    // 100% 处的颜色
                    offset: 1,
                    color: 'rgba(0, 102, 154, .4)',
                  },
                ],
              },
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: '#2386AD',
              borderWidth: 0,
            },
          },
        },
      };
      if (this.title == '中国') {
        // 散点系列数据
        option.series = [
          {
            type: 'effectScatter', // 带有涟漪特效动画的散点（气泡）图
            coordinateSystem: 'geo', //该系列使用的坐标系:地理坐标系
            // 特效类型,目前只支持涟漪特效'ripple'，意为“涟漪”
            effectType: 'ripple',
            // 配置何时显示特效。可选'render'和'emphasis' 。
            showEffectOn: 'render',
            rippleEffect: {
              // 涟漪特效相关配置。
              period: 10, // 动画的周期，秒数。
              scale: 4, // 动画中波纹的最大缩放比例。
              // 波纹的绘制方式，可选 'stroke' 和 'fill'。
              brushType: 'fill',
            },
            zlevel: 1, // 所有图形的 zlevel 值。
            data: this.points,
          },
          {
            // 线条系列数据
            type: 'lines',
            zlevel: 2,
            symbol: ['none', 'arrow'], // 标记的图形: 箭头
            symbolSize: 10, // 标记的大小
            effect: {
              // 线条特效的配置
              show: true,
              period: 6, // 特效动画的时间，单位s
              trailLength: 0, // 特效尾迹的长度。取值[0,1]值越大，尾迹越重
              symbol: this.planePath, // 特效图形的标记 可选'circle'等
              symbolSize: 15, // 特效标记的大小
            },
            lineStyle: {
              // 线条样式
              normal: {
                color: '#93EBF8',
                width: 2.5, // 线条宽度
                opacity: 0.6, // 尾迹线条透明度
                curveness: 0.2, // 尾迹线条曲直度
              },
            },
            data: this.linesData,
          },
        ];

        // 鼠标hover到航线上显示数据
        option.tooltip = {
          backgroundColor: '#92DCC6',
          show: true,
          formatter: (params) => {
            // console.log('line', params);
            return `<div style="text-align: center;">
                      <p>${params.data.fromname}>>>${params.data.toname}</p>
                      <p>距离：${params.data.value}</p>
                    <div>`;
          },
        };
      }

      // 地图注册，第一个参数的名字必须和option.geo.map一致
      this.$echarts.registerMap(this.title, geojson);
      this.charts.setOption(option);

      // 响应省份点击事件
      this.charts.on('click', (params) => {
        console.log('click', params);
        if (params.componentType == 'geo') {
          //点击地图操作
          this.title += '>' + params.name;
          this.initCharts();
        } else if (params.componentType == 'series') {
          if (params.componentSubType == 'lines') {
            console.log('点击线操作');
          }
        }
      });
    },
    // 获取标题最后一个地理名称
    getLastTitle() {
      let result = this.title;
      if (this.title.indexOf('>') != -1) {
        let arr = this.title.split('>');
        result = arr[arr.length - 1];
      }
      return result;
    },
    // 去掉标题的最后一个地理名称
    removeLastTitle() {
      let arr = this.title.split('>');
      arr.pop();
      this.title = arr.join('>');
    },
    // 返回上一层
    goback() {
      console.log('返回上一层');
      this.removeLastTitle();
      //重新初始化地图
      this.initCharts();
    },
  },
};
</script>
<style lang='scss' scoped>
.map_echarts_content {
  height: 100%;
  overflow: auto;

  //返回样式设置
  .returnImg {
    position: absolute;
    right: 0;
    z-index: 5;
    cursor: pointer;
    display: block;
    width: 25px;
  }

  // 基础地图样式
  .base_map {
    z-index: 1;
    height: 100%;
  }
}
</style>
